<script setup>
import {ref, onMounted} from 'vue'
import {addComment, getComment} from '@/util/video/videoComment.js'
import {ElMessage} from 'element-plus'

onMounted(() => {
  getCom()
})
const commentData = ref({
  videoId: '1',
  userId: '1',
  comment: '',
  //replyUserId: '2',  这个通过ThreadLocal拿到回去人的id
  rootId: '1'
  //时间都是由后端编写的
})
//添加评论
const detailComment = ref([]);
const addCom = async () => {
  const res = await addComment(commentData.value)
  if (res.data.code == 200) {
    ElMessage.success('success')
  }
}
const getCom = async () => {
  const res = await getComment('1')
  console.log(res.data.data)
  detailComment.value = res.data.data
}
</script>

<template>
  <el-form :style="{width:'500px'}">
    <el-form-item label="评论内容">
      <el-input v-model="commentData.comment" placeholder="请输入评论内容"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addCom">评论</el-button>
    </el-form-item>
  </el-form>
  <!--   如果点击的是回复评论 需要去找rootid  自己评论就是id-->
  <div v-for="(item,index) in detailComment" :key="index">
    <div>{{item.comment}}</div>
    <div v-for="(item1,index1) in item.reply" :key="index1">
      <div>{{item1.comment}}</div>
    </div>
  </div>
</template>

<style scoped>

</style>
